<template>
	<highlightjs autodetect :code="code" />
</template>

<script>
import Vue from 'vue'
export default {
	props: {
		code: {
			type: String,
			required: true
		},
		infos: {
			default: {}
		}
	},
	mounted() {
		hljs.initLineNumbersOnLoad()
		let infoData = JSON.parse(JSON.stringify(this.infos))
		if (! infoData)
			return
			
		let _this = this
			
		let interval = setInterval(() => {
							if ($("code.hljs-ln"))
							{
								clearInterval(interval)
								for(let item in infoData)
								{
									let component = Vue.extend({
										render(createElement) {
											return createElement('info', {
													attrs: {
														content: infoData[item].info
													}
												})
											}})
									let dom = new component().$mount().$el
									$(`.hljs-ln-code[data-line-number="${item}"]`).append(dom)
								}
								
							}
						}, 100)
	}
};	
</script>

<style>
.hljs {
	font-size: 16px;
}
</style>
